<template>
    <div class="flex justify-center items-center h-full">
        <form @submit.prevent="save" class="space-y-3">
            <select name="sex" id="sex" v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            <div>
                <input type="text" placeholder="姓名" class="from-input" v-model="name" />
            </div>
            <div>
                <input type="number" placeholder="年龄" class="from-input" v-model="age" />
            </div>
            <div>
                <input type="text" placeholder="账号" class="from-input" v-model="account" />
            </div>
            <div>
                <input type="password" placeholder="密码" class="from-input" v-model="password" />
            </div>
            <div class="flex justify-center">
                <button class="bg-gradient-to-r from-pink-600 to-pink-400 text-white px-3 py-2" type="submit">
                    注册
                </button>
            </div>
        </form>
    </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
    data: () => ({
        name: '',
        account: '',
        password: '',
        sex: '男',
        age: '',
    }),

    methods: {
        ...mapActions(['getUser']),
        async save() {
            const { name, account, password, sex, age } = this
            const { data } = await this.$http.post('api/register', { name, account, password, sex, age })
            if (!data.success) return
            this.getUser({ http: this.$http, query: { account, password } })
        },
    },
}
</script>

<style></style>
